<html>
	<head>

		<?php echo @$css.@$js;?>
		<script src="<?php echo MVC_WWW_HOST;?>js/flashupload/jquery.Jcrop.min.js"></script>
		<link rel="stylesheet" href="<?php echo MVC_WWW_HOST;?>js/flashupload/jquery.Jcrop.css" type="text/css" />
		<link rel="stylesheet" href="<?php echo MVC_WWW_HOST;?>js/flashupload/demos.css" type="text/css" />

		
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	
		
	<style type="text/css">
	body{margin: 0;color:#333333;font-size: 12px;}
	a{text-decoration:none;}
	.head{width:100%;height:26px;background: #333333;color:#ffffff;border-bottom:solid 1px #dddddd;}
	.cut_title{float:left;height:20px;padding:3px;font-weight:bold;color:#ffffff;}
	.head a{color:#ffffff;}
	.close{float:right;padding-top:3px;}
	.main{width:100%;padding-top:3px;}
	</style>
	</head>
	
	<body>


<div class="win_title">编辑图片<a href="javscript:;" onclick="parent.closeWin();" class="frame_close">[关闭] </a></div>
<div class="win_con">
		
		<!-- This is the image we're attaching Jcrop to -->
		<div style ="padding:5px 5px 5px 5px;">
		<!-- This is the form that our event handler fills -->
		<form action="<?php echo MVC_WWW_HOST.'admin/api/cutimg/do/post/thumbid/'.Http::get('thumbid')?>" method="post" onsubmit="return checkCoords();" style="margin:0px;">
			<input type="hidden" id="x" name="x" />
			<input type="hidden" id="y" name="y" />
			<input type="hidden" id="pw" name="pw" />
			<input type="hidden" id="ph" name="ph" />
			
			宽：<input type="text" style="width:30px;" id="w" name="w" />
			高：<input type="text" style="width:30px;" id="h" name="h" />
			<input type="hidden" id="imgsrc" name="imgsrc" value="<?php echo Http::get('imgsrc');?>">
			<input type="hidden" id="tw" name="tw" />
			<input type="hidden" id="th" name="th" />
			<input type="button" id="setSelect" onclick="wh()" value="自定义宽高">
			<input type="button" id="setSelect" onclick="zoom('big')" value="放大">
			<input type="button" id="setSelect" onclick="zoom('small')" value="缩小">
			<input type="submit" value="确 认" class="submit"/>
		</form>
		</div>
		<div id="image_con">
		<img src="<?php echo $img?>"  id="cropbox" class="cropbox" />
		</div>
	
</div>
</body>
<script language="Javascript">
var img   ;
var width ;
var height;
var useWidth ;
var useHeight ;
$(window).load(function(){

		img    = document.getElementById("cropbox");
		width  = img.clientWidth;
		height = img.clientHeight;
		useWidth = 380;
	    useHeight = 400;
		
		$("#tw").val(width);
		$("#th").val(height);
		$("#pw").val(useWidth);
		$("#ph").val(useHeight);

		if(width>useWidth && height >useHeight){
			var wdem = width-useWidth;
			var hdem = height-useHeight;
			if(wdem>hdem){
				$("#cropbox").attr({"width":useWidth});
				var max = 'width';
			}else{
				$("#cropbox").attr({"height":useHeight});
				var max = 'height';
			}
		}else{
			if(width>useWidth || height>useHeight){
				if(width>useWidth){
					$("#cropbox").attr({"width":useWidth});
					var max = 'width';
				}else{
					$("#cropbox").attr({"height":useHeight});
					var max = 'height';
				}
			}else{
				if(width>height){
					$("#cropbox").attr({"width":width});
					$("#cropbox").attr({"height":height});
					var max = 'width';
					$("#pw").val(width);
					$("#ph").val(height);
				}else{
					$("#cropbox").attr({"width":width});
					$("#cropbox").attr({"height":height});
					var max = 'height';
					$("#pw").val(width);
					$("#ph").val(height);
				}
			}
		}
		
		
		

		window.updateCoords = function (c)
		{
			$('#x').val(c.x);
			$('#y').val(c.y);
			$('#w').val(c.w);
			$('#h').val(c.h);
		};

		window.checkCoords = function()
		{
			if (parseInt($('#w').val())) return true;
			alert('请先选择要剪切的区域');
			return false;
		};
		
		window.initJcrop = function()//{{{
		{

			api = $.Jcrop('#cropbox',{
				setSelect: [ 50, 50, 0, 0 ]
			});

			$('#cropbox').Jcrop({
				onSelect: updateCoords,
				onChange: updateCoords
			});

		};

		// A handler to kill the action
		window.nothing = function(e)
		{
			e.stopPropagation();
			e.preventDefault();
			return false;
		};
		initJcrop();
		window.wh = function(){
			//alert('sss');
			var www = parseInt($("#w").val());
			var hhh = parseInt($("#h").val());
			var xxx = parseInt($("#x").val());
			var yyy = parseInt($("#y").val());
			if(www>0 && hhh>0 ){
			
				api.animateTo( [ www+xxx ,hhh+yyy ,xxx,yyy ] );
			}else{
				showAlert('请先定义区域的宽和高');
			}
			
		};
		window.zoom = function(type){
			if (type=='small'){
				var bw = parseInt($("#cropbox").css("width"))*0.9;
				var bh = parseInt($("#cropbox").css("height"))*0.9;
				$("#image_con").html('<img src = <?php echo $img;?>"  id="cropbox" class="cropbox" width="'+bw+'"  height="'+bh+'"  />');
				initJcrop();
				$("#pw").val(bw);
				$("#ph").val(bh);
			}else{
				
				var bw = parseInt($("#cropbox").css("width"))*1.1;
				var bh = parseInt($("#cropbox").css("height"))*1.1;
				if(bw<width){
					$("#image_con").html('<img src = <?php echo $img;?>"  id="cropbox" class="cropbox" width="'+bw+'" height="'+bh+'" />');
					initJcrop();
					$("#pw").val(bw);
					$("#ph").val(bh);
				}
			}
		}
});
		</script>
</html>
